<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">账号信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="姓名">张三</a-descriptions-item>
            <a-descriptions-item label="账号"> 12345 /> </a-descriptions-item>
            <a-descriptions-item label="启用状态">启用</a-descriptions-item>
            <a-descriptions-item label="手机">12355454</a-descriptions-item>
            <a-descriptions-item label="所属经销商"
              >华北总代</a-descriptions-item
            >
            <a-descriptions-item label="密码"> </a-descriptions-item>
            <a-descriptions-item label="备注"> 1234</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">个人信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="绑定维修">李四</a-descriptions-item>
            <a-descriptions-item label="头像"
              ><a-image
                :preview="{
                  visible,
                  onVisibleChange: setVisible,
                }"
                :width="28"
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              />
              <a-button type="link" size="small" @click="() => setVisible(true)"
                >查看</a-button
              ></a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">积分管理</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="当日剩余积分" :span="2">23</a-descriptions-item>
            <a-descriptions-item label="临时调整积分"
              ><a-input v-model:value="formState.points" placeholder="请输入积分数值"
            /></a-descriptions-item>
            <a-descriptions-item label="临时积分有效期">
              <a-select
                v-model:value="formState.status"
                placeholder="请选择"
              >
                <a-select-option value="china">China</a-select-option>
                <a-select-option value="usa">U.S.A</a-select-option>
              </a-select></a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
const formState = ref({
  points: "",
  status: [],
});
const visible = ref(false);
const setVisible = (value) => {
  visible.value = value;
};
const seePhone = ref(false);
const seePhone2 = ref(false);
const handleChangeSee = (type) => {
  if (type === 1) {
    console.log("手机号");
    seePhone.value = !seePhone.value;
  } else if (type === 2) {
    console.log("联系电话");
    seePhone2.value = !seePhone2.value;
  }
};
</script>

